<template>
    <div style="padding-top: 20px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="tel">
              <el-input
                v-model="form.tel"
                placeholder="请输入联系电话"
                maxlength="11"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="在职岗位" prop="jobName">
              <el-input
                v-model="form.jobName"
                placeholder="请输入在职岗位"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="二维码指向链接" prop="qrcode">
              <el-input
                v-model="form.qrcode"
                placeholder="请输入二维码链接"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="二维码" prop="qrcodeUrl">
              <div>
          <upload-view  @img="getimgLis"></upload-view>
        </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="二维码" prop="email">
              <el-input
                v-model="form.detailAddress"
                placeholder="请输入邮箱"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div style="width: 750px; text-align: center">
        <el-button type="primary" @click="handleQuery">提 交</el-button>
      </div>
    </div>
  </template>
    
    <script>
  import draggable from "vuedraggable";
  import uploadView from "../../../components/ImageUpload";
  import { insertpeople } from "@/api/addming";
  
  export default {
    components: {
      draggable,
      uploadView,
    },
    data() {
      return {
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          // email: [
          //   {
          //     type: "email",
          //     message: "请输入正确的邮箱地址",
          //     trigger: ["blur", "change"],
          //   },
          // ],
          phone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur",
            },
          ],
        },
      };
    },
    methods: {
      getimgLis(data){
      console.log('图片路径',data)
      this.form.qrcodeUrl = data[0].url
    },
      // 提交
      handleQuery() {
        insertpeople(this.form).then((res) => {
          console.log("保存成功了吗", res);
          if(res.code == 200){
            this.$modal.msgSuccess("新增成功");
            this.form = {}
          }
        });
      },
    },
  };
  </script>
    
    <style>
  </style>
    